<script setup lang="ts">
import { ShortVideo } from "@/api/short_video";
import { reactive, ref } from "vue";

// 声明 props 类型
export interface FormProps {
  active?: string;
  formInline?: ShortVideo;
}

const props = withDefaults(defineProps<FormProps>(), {
  active: "create",
  formInline: () =>
    ({
      id: 0,
      source: "",
      source_id: "",
      category_id: 0,
      category: "",
      title: "",
      duration: 0,
      cover: "",
      remark: "",
      author: "",
      tags: [],
      status: 0,
      selling_points: "",
      is_vertical: false,
      incoming_time: "",
      show_time: "",
      copyright_expiry: ""
    }) as ShortVideo
});
const newFormInline = reactive(props.formInline);

const fileList = ref([]);

const handleChange = () => {};
</script>

<template>
  <el-form
    :model="newFormInline"
    class="min-w-[540px]"
    label-position="right"
    label-width="auto"
  >
    <el-row>
      <el-col :span="12">
        <el-form-item label="来源">
          <el-select
            v-model="newFormInline.source_id"
            class="w-[200px]!"
            placeholder="请选择来源"
          >
            <el-option label="bilibili" value="bilibili" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="来源ID">
          <el-input
            v-model="newFormInline.source"
            class="w-[200px]!"
            placeholder="请输入短视频来源ID"
          />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="名称">
          <el-input
            v-model="newFormInline.title"
            class="w-[440px]!"
            placeholder="请输入短视频名称"
          />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="分类">
          <el-select
            v-model="newFormInline.category_id"
            class="w-[200px]!"
            placeholder="请选择城市"
          >
            <el-option label="上海" value="上海" />
            <el-option label="浙江" value="浙江" />
            <el-option label="深圳" value="深圳" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="视频文件">
          <el-upload
            v-model:file-list="fileList"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            :limit="1"
          >
            <el-button type="primary">Click to upload</el-button>
            <template #tip>
              <div class="m-0 p-0">
                jpg/png files with a size less than 500KB.
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="关键词">
          <el-input-tag
            v-model="newFormInline.tags"
            class="w-[440px]!"
            placeholder="请输入短视频关键词"
          />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="视频简介">
          <el-input
            v-model="newFormInline.remark"
            class="w-[440px]!"
            type="textarea"
            placeholder="请输入短视频简介"
          />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="内容看点">
          <el-input
            v-model="newFormInline.selling_points"
            class="w-[440px]!"
            type="textarea"
            placeholder="请用一句话总结视频内容看点"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="入库时间">
          <el-date-picker
            v-model="newFormInline.incoming_time"
            type="date"
            placeholder="请选择入库时间"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="到期时间">
          <el-date-picker
            v-model="newFormInline.copyright_expiry"
            type="date"
            placeholder="请选择版权到期时间"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
